<template>
  <div id="container">
    <mu-appbar style="width: 100%;text-align: left" color="primary">
      <span >猫狗识别演示</span>
      <mu-button flat slot="right">你好，{{user_info.nickname}}！</mu-button>
    </mu-appbar>
    <div style="clear:both;height:15px"></div>

    <mu-container>
      <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
        <mu-card-media>
          <img src="../assets/img/cover.jpg" id="userImage">
        </mu-card-media>
        <mu-card-title title="猫狗识别" sub-title="选择一张猫/狗图片，来让机器识别吧"></mu-card-title>
        <mu-card-text>
          <div v-if="!choesed">{{introduce}}</div>
          <div v-else>识别结果：{{recog_res}}</div>
        </mu-card-text>
        <mu-card-actions>
          <input type="file" id="userFile" @change="handleSelect" style="display: none">
          <mu-button @click="triggerFileSelect" color="primary">选择图片</mu-button>
        </mu-card-actions>
      </mu-card>
    </mu-container>

    <mu-container class="bottomNav">
      <mu-bottom-nav>
        <mu-bottom-nav-item title="猫狗识别" to="/main" icon="restore"></mu-bottom-nav-item>
        <mu-bottom-nav-item title="项目实战" to="/practice" icon="edit"></mu-bottom-nav-item>
        <mu-bottom-nav-item title="模型测试" to="/evalmodel" icon="explore"></mu-bottom-nav-item>
        <mu-bottom-nav-item title="个人资料" to="/mymodel" icon="person"></mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-container>
  </div>
</template>


<script>
import * as tf from '@tensorflow/tfjs'
import qs from "qs";
const axios = require('axios');
axios.defaults.withCredentials = true;
export default {
  name: "Main",
  data(){
    return{
      user_info: {
        nickname:"",
        id:""
      },
      choesed:false,
      introduce:"猫狗识别是典型的图像二分类应用。在猫狗识别程序中，机器逐层（训练层）读取每张图片的特征，并且计算出这" +
        "张图片是猫或者狗的概率值，然后将概率映射到标签猫或者狗上（这就是二分类的实现），最后将这个计算结果与真实结果比较，如果两个结果不同，机器就会更新" +
        "计算值重复计算过程，使计算结果与真实结果尽可能接近。等机器学习结束后，就可以让机器识别其他的猫狗图片了。",
      recog_res:""
    }
  },
  methods:{
    handleSelect(){
      var file = document.getElementById('userFile').files[0];
      var _this = this
      var img = document.getElementById('userImage');
      var fr = new FileReader()
      fr.onloadend = function (e) {
        img.src = e.target.result
        predict(e.target.result)
      }
      fr.readAsDataURL(file)

      async function predict(source) {
        var img =await document.getElementById('userImage');
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [128,128]).toFloat()
        tf.print(imgTensor)
        let tensor = imgTensor.expandDims(0)
        const prediction = await window.model.predict(tf.div(tensor,255)).dataSync();
        console.log(prediction)
        if (prediction[0] >0.5) {
          _this.$data.recog_res = '猫猫'
        } else _this.$data.recog_res = '狗子'
        _this.$data.choesed=true;
      }
    },
    triggerFileSelect(){
      var btn=document.getElementById("userFile")
      console.log(btn)
      btn.click()
    },

  },
  mounted() {
    var _this=this
    const MODEL_URL = 'http://192.168.31.103:2444/Dog_vs_Cat/model.json'
    const  loadModel = (async function () {
      window.model = await tf.loadLayersModel(MODEL_URL);
    })
    loadModel().then(function(){
      axios.get("http://192.168.31.103:2444/LoginCenter/getUserInfo").then(function(res){
        console.log(res)
        _this.$data.user_info.id=res.data.user_id;
        _this.$data.user_info.nickname=res.data.nickname;

      });
    });
  }
}
</script>

<style>


</style>
